<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>

		.box {
			width: 200px;
			height: 200px;
			/* background-color: green; */
			/* 分别设置过渡属性 */
			/* transition-property: width, height; */
			/* 分别设置过渡持续时间 */
			/* transition-duration: 1s, 1s; */
        }

        .box1 {
            background-color: green;
        }
        
        .box2 {
            background-color: red;
            transition-property: all;
            transition-duration: 3s;
        }
        
        .box2:hover {
            background-color: blue;
        }
		
	</style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
</body>
</html>